.project-profit{
  height: 100%;
  overflow-y: scroll;
  background: linear-gradient(180deg, #e0eefe 0%, #f6f9ff 100%);
}
//public-css
.name-style{
  width: 100%;
  @include mixin.fontStyle(14px,#4E5969);
  @include mixin.flexStyle(center,center);
  .el-icon{
    cursor: pointer;
    margin-left: 3px;
  }
}
.gray-name-style{
  width: 100%;
  @include mixin.fontStyle(12px,#86909C);
  @include mixin.flexStyle(center,center);
  .el-icon{
    margin-left: 3px;
    cursor: pointer;
  }
}
.black-value-style{
  font-size: 16px !important;
  color: #3D3D3D !important;
  font-weight: 400 !important;
}
//top-filter
.top-filter{
  background: #fff;
  border-radius: 10px;
  padding: 20px 20px 2px 20px;
  :deep(.el-form-item){
    height: 32px;
    margin-right: 25px;
  }
  .quick-choose{
    :deep(.el-button){
      margin-right: 0;
      margin-left: 8px !important;
    }
  }

}
//contract-statistics
.contract-statistics{
  margin-top: 15px;
  height: 410px;
  @include mixin.flexStyle(flex-start,space-between);
  .statistics-left,.statistics-right{
    background: #fff;
    border-radius: 10px;
    padding: 20px;
  }
  .statistics-left{
    flex: 1;
    .total{
      //padding:20px 20px 25px 20px;
      margin-top: 25px;
      background: url("../../assets/images/projectProfit/contract-total-bg.png") no-repeat;
      background-size: 100% 100%;
      margin-bottom: 20px;
      @include mixin.flexStyle(space-between,center);
      &__left{
        padding: 20px;
      }
      &-title{
        @include mixin.flexStyle(flex-start,center);
        @include mixin.fontStyle(16px,#fff);
        margin-bottom: 15px;
        img{
          margin-right: 5px;
          @include mixin.blockStyle(16px,16px,none);
        }

      }
      &-num{
        @include mixin.fontStyle(32px,#fff,bold);
        span{
          @include mixin.fontStyle(18px,#fff,normal);
          margin-left: 10px;
        }
      }
      &__right{
        img{
          width: 90px;
          margin: 10px 20px;
        }
      }

    }
    .total-detail{
      @include mixin.gridStyle(repeat(2,1fr),20px);
      .total-item{
        border-radius: 10px;
        background: #F6F8FA;
        text-align: center;
        padding: 20px 0;
        &__money{
          width: 100%;
          @include mixin.fontStyle(14px,#FF3333,bold);
          margin-bottom: 10px;
        }
      }
    }
  }
  .statistics-right{
    flex: 3;
    margin-left: 15px;
    .already-settled{
      margin-top: 25px;
      @include mixin.gridStyle( 220px 2fr,20px);
      height: calc(100% - 50px);
      .profit-list{
        border-radius: 10px;
        background: #F6F8FA;
        .profit-item{
          width: calc(100% - 40px);
          margin-left: 20px;
          height: 50%;
          @include mixin.flexVerticalCenter;
          &__money{
            @include mixin.fontStyle(16px,#FF3333,bold);
            margin-bottom: 15px;
          }
        }
        .profit-item:first-child{
          border-bottom: 4px solid #fff;
          border-radius: 2px;
        }
      }
      .profit-detail{
        &__item{
          height: calc(50% - 10px);
          @include mixin.gridStyle(1fr 2fr,20px);
          background: #F6F8FA;
          padding: 10px;
          box-sizing: border-box;
          border-radius: 10px;

        }
        &__item:first-child{
          margin-bottom: 20px;
        }
        .left{
          @include mixin.flexVerticalCenter;
          background: #EBF2FD;
          border: 2px solid #FFFFFF;
          border-radius: 5px;
          img{
            width: 41px;
            height: 41px;
          }
          .name-style{
            margin: 10px 0;
          }

        }
        .right{
          .describe-list{
            height: 100%;
            padding-right: 20px;
            .describe-item{
              @include mixin.flexStyle();
              height: 33%;
              border-bottom:1px solid #EBEEF1;
              .gray-name-style{
                justify-content: flex-start;
              }
              &:last-child{
                border-bottom: none;
              }
            }
          }
        }
      }
    }

  }
}

.table-content{
  background: #fff;
  margin-top: 20px;
  border-radius: 10px;
  .table-filter{
    @include mixin.flexStyle();
    border-bottom: 1px solid #E1E6ED;
    padding: 20px 20px 10px 20px;
    margin-bottom: 10px;
  }
  .table-content-style{
    margin: 20px;
    .customer-name{
      @include mixin.fontStyle(14px,#007DFF);
      text-decoration: underline;
      cursor: pointer;
    }
    .money-detail{
      .red-font{
        @include mixin.fontStyle(14px,#FF3333);
      }
      .gray-font{
        @include mixin.fontStyle(10px,#606266);
      }
    }
    .profit-detail{
       &__top{
         @include mixin.fontStyle(14px,#606266);
       }
      &__bottom{
        @include mixin.fontStyle(10px,#FF3333);
      }
    }
    .status-tag{
      @include mixin.flexStyle(center,center);
      width: fit-content;
      padding: 0 10px;
      border-radius: 2px;
      border: 1px solid #fff;
      font-size: 12px;
    }
  }
}

//表格样式
.table-content-style {
  :deep(.el-table){
    border: 1px solid #DCDFE6;
    tr{
      height: 45px;
    }
    tr th{
      background: #F2F6FC;
      font-weight: normal;
      font-size: 14px;
      color: #909399;
    }
    tr td{
      color: #606266;
    }
    tr:nth-of-type(even) td{
      background: #F5F7FA;
    }
  }

}
:deep(.el-pagination){
  margin:0 20px 20px 20px;
}
:deep(.el-table__footer-wrapper){
  box-shadow: 0px -4px 4px 0px rgba(68,100,172,0.1);
  position: relative;
  z-index: 1;
}
:deep(.el-table__footer){
  tfoot td.el-table__cell{
    background: #F2F6FC !important;
    border: 1px solid #E9ECF0;
    border-top-color: #DCDFE6;
    border-right: 0;
    &:nth-of-type(1){
      @include mixin.fontStyle(18px,#1A1A1A,bold);
      border-left: 0;
    }
    &:nth-of-type(4),&:nth-of-type(5),&:nth-of-type(6){
      color: #FF3333;
    }
    &:nth-of-type(10) p:nth-of-type(2){
       color: #FF3333;
      font-size: 10px;
     }
    &:nth-of-type(4) p:nth-of-type(2),&:nth-of-type(5) p:nth-of-type(2){
      color:#606266;
      font-size: 10px;
    }
  }

}